<template>
	<div class="now">
		<ul>
			<li v-for="item in nowPlayData" :key="item.id">
				<div class="img-wraper"><img :src="item.img"></div>
				<div class="desc-wraper">
					<p class="name">{{item.name}}</p>
					<p><span class="desc-color">观众评</span><span class="score">{{item.score}}</span></p>
					<p class="desc-color actors">{{item.actors}}</p>
					<p class="desc-color">{{item.nums}}</p>
				</div>
				<div class="desc-button">
					<button>购票</button>
				</div>
			</li>
		</ul>
	</div>
</template>

<script type="text/javascript">
	export default{
		data(){
			return{
				nowPlayData:[]
			}
		},
		created(){
			this.getnowPlayData();
		},
		methods:{
			getnowPlayData(){
				var that=this;
				axios.get('/mock/nowPlayData.json')
				.then(response=>{
					console.log(response);
					if(response.status==200){
						if(response.data && response.data.nowPlayData){
							that.nowPlayData=response.data.nowPlayData;
						}
					}
				})
				.catch(function(error){
					console.log(error);
				})
			}
		}
	}
</script>

<style scoped>
	.button-wraper{
		float:right;
		line-height:80px;
	}
	img{
		width:70px;
	}
	.img-wraper{
		width:23%;
		margin-bottom:10px;
		float:left;
	}
	.desc-wraper{
		width:60%;
		float:left;
	}
	li{
		margin:15px;
		overflow: hidden;
		border-bottom:1px solid #cccccc;
	}
	.name{
		font-weight:bold;
	}
	.score{
		font-weight:700;
		color:#faaf00;
		font-size:15px;
		margin-left:10px;
	}
	.desc-color{
		font-size:13px;
		color:#666;
		line-height:22px;
		width:200px;
		overflow:hidden;
		white-space:nowrap;
		text-overflow:ellipsis;
	}
	button{
		width:47px;
		height:27px;
		background-color: #f03d37;
		color:#fff;
		border-radius:4px;
		border:none;
		font-size:12px;
		cursor:pointer;
	}
	.desc-button{
		float:right;
		padding-top:35px;
	}
</style>
